<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="finish_index" style="width:1100px; height:560px;"></div>

<script type="text/javascript">
    var myCharts=echarts.init(document.getElementById('finish_index'));
    myCharts.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {//工具栏
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            orient:'horizontal',//水平方向 默认状态是水平显示
            top:20,
            itemWidth:14, //宽
            itemHeight:14,//高
            itemGap:70,//间距
            selectMode:true,//可否选择
            data:['测试次数','作业次数','总次数'],
            textStyle: {
                color: '#222',//设置字体颜色
                fontSize: 14,//字体大小
            },
        },
        xAxis: [
            {
                type: 'category',
                data: ['高一','高二','高三'],
                axisPointer: {//
                    type: 'shadow'//阴影指示器   //'line' 直线指示器
                },
               splitLine:{//x轴的线是否显示，竖着的
                    show:true,

               },
                axisLabel:{
                    margin:10,//刻度标签与轴线之间的距离
                   textStyle:{
                       fontSize:20,//控制轴线上字体大小

                   }
                },
                nameRotate:90, //无效
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '次数',
                min: 0,
                max: 200,
                interval: 50,//间隔大小

            },
            {
                type: 'value',
                //name: '温度',
                min: 0,
                max: 200,
                interval: 50,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name:'测试次数',
                type:'bar',
                stack:'stack',
                data:[10, 20, 60],
                barWidth:25,
                itemStyle:{
                    normal:{
                        color: '#01c2a3' //更改相应数据的颜色
                    },
                    emphasis:{
                        color: '#01c2a3'
                    }
                }
            },
            {
                name:'作业次数',
                type:'bar',
                stack:'stack',
                data:[16, 80, 50],
                barWidth:25,
                itemStyle:{
                    normal:{
                        color: '#fea700'
                    },
                    emphasis:{
                        color: '#fea700'
                    }
                }
            },
            {
                name:'总次数',
                type:'line',
                yAxisIndex: 1,
                data:[26, 100, 110],
                smooth:true,//折线为光滑线
                itemStyle: {
                    normal: {
                        color: '#009a46'
                    },
                    emphasis: {
                        color: '#009a46'
                    }
                },
            }
        ]
    })

</script>
</body>
</html>